<template>
    <Header msg="头部分"></Header>
    <div ref="targetDiv" class="ycnz">
      <div>
      <div ref="targetDiv" class="ycnz">
        <el-main class="main">
          <div class="middle-1">
            <el-row :gutter="10" style="height: 50px;">
              <el-col :span="2">
                <el-button type="primary" :icon="Headset" class="but-ss purple-gradient">生成配音</el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" :icon="Download" class="but-ss purple-gradient">下载配音 </el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" :icon="VideoCameraFilled" class="but-ss purple-gradient">下载视频 </el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" :icon="Document" class="but-ss purple-gradient">生成字幕 </el-button>
              </el-col>
              <el-col :span="11"></el-col>
              <el-col :span="2">
                <el-switch v-model="isDarkMode" class="mt-2" :active-icon="Moon" :inactive-icon="Sunny" size="large"
                  @change="toggleTheme" />
              </el-col>
              <el-col :span="3"></el-col>
            </el-row>
          </div>
          <div class="middle-2">
            <el-row :gutter="20" style="height: 70px;">
              <el-col :span="4">
                <el-row :gutter="20" style="height: 70px;" class="grid-content ep-bg-purple">
                  <el-col :span="6">
                    <a href="#" @click.prevent="handleClick" class="clickable-col">
                      <div style="text-align: center;">
                        <img src="../images/Importcopy.png" width="60%" height="60%">
                      </div>
                      <div style="font-size: 12px;">导入文案</div>
                    </a>
                  </el-col>
                  <el-col :span="6"></el-col>
                  <el-col :span="6"></el-col>
                  <el-col :span="6"></el-col>
                </el-row>
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="2">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="4">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="2">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="1">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="3"></el-col>
            </el-row>
          </div>
          <div class="middle-3">
            <el-row :gutter="20" class="middle-3-1">
              <el-col :span="11">
                <div class="grid-content ep-bg-purple">
                  <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="6">
                      <div class="grid-content ep-bg-purple2" />
                    </el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="3">
                      <div class="grid-content ep-bg-purple2" />
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content ep-bg-purple2" />
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content ep-bg-purple2" />
                    </el-col>
                  </el-row>
                  <div style="height: 400px;" class="grid-content ep-bg-purple2"></div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="10">
                <div class="grid-content ep-bg-purple" />
              </el-col>
            </el-row>
          </div>
        </el-main>
      </div>
    </div>
    </div>
    <Footer msg="脚部分"></Footer>
  </template>
  
  <script>
  import { ref, computed, onMounted } from 'vue';
  import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload } from '@element-plus/icons-vue';
  import Footer from '../components/footer.vue';
  import Header from '../components/header.vue';
  
  import "../css/Homepage.css";
  export default {
    components: {
      Footer,
      Header,
    },
    methods: {
      handleClick() {
        // 在这里定义点击后的操作
        alert('导入文案被点击了');
        // 例如，可以在这里打开一个模态框或者跳转到其他页面
      }
    },
  
    setup() {
      const isDarkMode = ref(false);
      const targetDiv = ref(null);
  
  
      const toggleTheme = (value) => {
        isDarkMode.value = value;
  
        // 修改特定元素的类名 修改主题
        if (value) {
          targetDiv.value.className = 'dark';
        } else {
          targetDiv.value.className = 'light';
        }
      };
  
      // 初始化时设置默认主题
      onMounted(() => {
        toggleTheme(isDarkMode.value);
      });
  
      return {
        isDarkMode,
        Headset,
        Document,
        Download,
        VideoCameraFilled,
        Moon,
        Sunny,
        toggleTheme,
        targetDiv,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 你可以在这里定义不同的主题样式 */
  .purple-gradient {
    background: linear-gradient(135deg, #a855f0, #6b21a8);
    /* 渐变从浅紫色到深紫色 */
    color: white;
    /* 文本颜色为白色 */
    border-color: transparent;
    /* 边框颜色设置为透明 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */
    border: transparent;
    font-size: 15px;
  
    &:hover,
    &:focus {
      background: linear-gradient(135deg, #6b21a8, #a855f0);
      /* 鼠标悬停或聚焦时反转渐变方向 */
      box-shadow: 0 4px 15px rgba(107, 33, 168, 0.4);
      /* 添加阴影效果 */
      border: transparent;
    }
  }
  .clickable-col {
    display: inline-block;
    padding: 5px;
    margin-top: 5px;
    border-radius: 4px;
    text-decoration: none; /* 去掉链接的下划线 */
    color: inherit; /* 继承父元素的颜色 */
    background-color: rgba(0, 0, 0, 0.1); /* 轻微的黑色背景 */
    transition: background-color 0.3s ease; /* 平滑过渡背景色变化 */
  }
  
  .clickable-col:hover {
    background-color: rgba(0, 0, 0, 0.3); /* 鼠标悬停时加深背景色 */
  }
  
  .clickable-col img {
    display: block; /* 使图片独占一行 */
    margin: 0 auto; /* 图片居中 */
  }
  </style>